<template>
  <base-panel-lg class="home-energy-stats" title="能耗用量分览">
    <template #right-btn>
      <base-btn @click="active = 0" :active="active === 0">能量趋势</base-btn>
      <base-btn @click="active = 1" :active="active === 1">用电占比</base-btn>
    </template>
    <!-- <v-chart class="pie" :options="option" /> -->
    <v-chart class="chart" :options="chartData" />
  </base-panel-lg>
</template>

<script>
import BasePanelLg from './BasePanelLg.vue';
import BaseBtn from './BaseBtn.vue';

export default {
  components: {
    BasePanelLg,
    BaseBtn,
  },

  data() {
    return {
      active: 0,
      // option: {
      //   // backgroundColor: '#f5f5f5',
      //   tooltip: { trigger: 'axis' },
      //   legend: {
      //     top: '-5vh',
      //     right: '20vw',
      //     data: [
      //       {
      //         name: '教学区',
      //         icon: 'rect',
      //       },
      //       {
      //         name: '生活区',
      //         icon: 'rect',
      //       },
      //     ],
      //     textStyle: {
      //       color: '#fff',
      //     },
      //     itemStyle: {

      //     },
      //   },
      //   grid: {
      //     left: '5%',
      //     right: '7%',
      //     top: '20%',
      //     bottom: '1%',
      //     containLabel: true,
      //   },
      //   xAxis: {
      //     boundaryGap: false,
      //     data: [
      //       '08/01',
      //       '08/01',
      //       '08/01',
      //       '08/01',
      //       '08/01',
      //       '08/01',
      //       '08/01',
      //       '08/01',
      //       '08/01',
      //       '08/01',
      //       '08/01',
      //       '08/01',
      //     ],
      //     axisLabel: {
      //       fontSize: 8, color: '#5183d2', rotate: -45, interval: 0,
      //     },
      //     axisTick: { show: false },
      //     axisLine: { lineStyle: { color: '#2f4871' } },
      //     splitLine: { show: false },
      //   },
      //   yAxis: [
      //     {
      //       axisLabel: { color: '#fff' },
      //       axisLine: { lineStyle: { color: '#2f4871' } },
      //       axisTick: { show: false },
      //       splitLine: { show: false },
      //       min: 1000,
      //       splitNumber: 5,
      //     },
      //   ],
      //   series: [
      //     {
      //       name: '教学区',
      //       type: 'line',
      //       itemStyle: { opacity: 0, color: '#eb4fba' },
      //       lineStyle: {
      //         color: {
      //           type: 'linear',
      //           x: 0,
      //           y: 0,
      //           x2: 0,
      //           y2: 1,
      //           colorStops: [
      //             { offset: 0, color: '#fc59b1' },
      //             { offset: 1, color: '#b834d1' },
      //           ],
      //         },
      //       },
      //       areaStyle: {
      //         color: {
      //           type: 'linear',
      //           x: 0,
      //           y: 0,
      //           x2: 0,
      //           y2: 1,
      //           colorStops: [
      //             { offset: 1, color: 'rgba(255,255,255,0)' },
      //             { offset: 0, color: 'rgba(255,255,255,.2)' },
      //           ],
      //         },
      //       },
      //       data: [1000, 2000, 3000, 4000, 5000, 4000, 3000, 2000, 1000, 3000, 3500, 2000],
      //     },
      //     {
      //       name: '生活区',
      //       type: 'line',
      //       itemStyle: { opacity: 0, color: '#50b1ff' },
      //       lineStyle: {
      //         color: {
      //           type: 'linear',
      //           x: 0,
      //           y: 0,
      //           x2: 0,
      //           y2: 1,
      //           colorStops: [
      //             { offset: 0, color: '#3a69fd' },
      //             { offset: 1, color: '#56cee1' },
      //           ],
      //         },
      //       },
      //       areaStyle: {
      //         color: {
      //           type: 'linear',
      //           x: 0,
      //           y: 0,
      //           x2: 0,
      //           y2: 1,
      //           colorStops: [
      //             { offset: 0, color: '#0e244c' },
      //             { offset: 1, color: '#0e244c' },
      //           ],
      //         },
      //       },
      //       data: [3000, 3000, 3000, 4000, 3000, 2000, 5000, 4000, 3000, 2000, 5000, 4000],
      //     },
      //   ],
      // },
      chartData: {
        xAxis: {
          type: 'category',
          data: [
            '08/01', '08/03', '08/05', '08/07', '08/09', '08/11', '08/13',
            '08/15', '08/17', '08/19', '08/21', '08/23', '08/25', '08/27',
            '08/29', '08/31',
          ],
          axisLabel: { color: '#669ef4', fontSize: 10, rotate: -45 },
          axisLine: {
            lineStyle: { color: 'rgba(255,255,255,.2)' },
          },
          axisTick: false,
          boundaryGap: false,
        },
        yAxis: {
          type: 'value',
          axisLabel: { color: '#fff', fontSize: 11 },
          axisLine: {
            lineStyle: { color: 'rgba(255,255,255,.2)' },
          },
          axisTick: false,
          splitLine: false,
          min: 2000,
        },
        grid: {
          top: 25,
          bottom: 42,
          left: 65,
          right: 15,
        },
        series: [
          {
            name: '生活区',
            type: 'line',
            data: [
              5600, 4200, 6500, 7000, 5500, 8500, 4000, 9600, 8000, 6300, 7000,
              8200, 7800, 8700, 7200, 9800,
            ],
            symbol: 'none',
            itemStyle: {
              color: {
                colorStops: [
                  { offset: 0, color: '#3861ff' },
                  { offset: 1, color: '#67fbff' },
                ],
              },
            },
            lineStyle: {
              color: {
                x: 0,
                y: 0,
                x2: 0,
                y2: 1,
                colorStops: [
                  { offset: 0, color: '#67fbff' },
                  { offset: 1, color: '#3861ff' },
                ],
              },
            },
            areaStyle: {
              color: {
                x: 0,
                y: 0,
                x2: 0,
                y2: 1,
                colorStops: [
                  { offset: 0, color: 'rgba(255,255,255,.2)' },
                  { offset: 1, color: 'rgba(255,255,255,0)' },
                ],
              },
            },
          },
          {
            name: '教学区',
            type: 'line',
            data: [
              4100, 6300, 5500, 8000, 7500, 9500, 8100, 8200, 6500, 8400, 6300,
              5000, 6000, 7200, 9000, 7800,
            ],
            symbol: 'none',
            itemStyle: {
              color: {
                colorStops: [
                  { offset: 0, color: '#8318ec' },
                  { offset: 1, color: '#fd59b0' },
                ],
              },
            },
            lineStyle: {
              color: {
                x: 0,
                y: 0,
                x2: 0,
                y2: 1,
                colorStops: [
                  { offset: 0, color: '#fd59b0' },
                  { offset: 1, color: '#8318ec' },
                ],
              },
            },
            areaStyle: {
              color: {
                x: 0,
                y: 0,
                x2: 0,
                y2: 1,
                colorStops: [
                  { offset: 0, color: 'rgba(255,255,255,.2)' },
                  { offset: 1, color: 'rgba(255,255,255,0)' },
                ],
              },
            },
          },
        ],
        legend: {
          icon: 'rect',
          itemWIdth: 15,
          itemHeight: 3,
          textStyle: {
            color: '#fff',
            fontSize: 11,
          },
          data: [
            { name: '教学区' },
            { name: '生活区' },
          ],
          right: 27,
          top: 0,
        },
      },
    };
  },
};
</script>

<style lang="scss" scoped>
.home-energy-stats {
  height: 28.444vh;
  margin-bottom: 2.037vh;
}

// .pie {
//   width: 100%;
//   height: 100%;
// }

.chart {
  width: 100%;
  height: 100%;
}
</style>
